//I18n message xml
var loginMessage = new i18nMessage('../servlet/I18nMessageServlet?keyPrefix=ui.login');
var message = new i18nMessage('../servlet/I18nMessageServlet?keyPrefix=message.tip');

//If the validating image is not clear, the user can refresh the validating image on the login panel. 
var refreshValidatingImg = function(){
    var img = Ext.get('validatingImg');
    img.dom.src = '../servlet/GetValidatingImageServlet?' + Date.parse(new Date());
};

//Get the validating image on the login panel
var getValidatingImg = function(){
    var img = '<img id="validatingImg" src="../servlet/GetValidatingImageServlet" height="20" width="60" class="validatingImg"/>';
    img += '&nbsp;&nbsp;<a href="javascript: refreshValidatingImg();">' + loginMessage.getValueFromTagName('ui.login.validatingcode.notclear') + '</a>'
    return img;
};

//For the login page image
var imgSrc = new Array();//Image url
imgSrc[0] = "../images/loginbg1.png"
imgSrc[1] = "../images/loginbg2.png"
imgSrc[2] = "../images/loginbg3.png"
imgSrc[3] = "../images/loginbg4.png"


for (var i = 0; i < imgSrc.length; i++) {
    (new Image()).src = imgSrc[i];//load image
}

//Slide the image in the image array.
var step = 0;
function slideit(){
    var oImg = document.getElementById("loginbg");
    if (document.all) {
        oImg.filters.blendTrans.apply();
    }
    oImg.src = imgSrc[step];
    if (document.all) {
        oImg.filters.blendTrans.play();
    }
    step = (step < (imgSrc.length - 1)) ? (step + 1) : 0;
}

var loginForm;

var locales = [['zh_CN', '中文'], ['fr_FR', 'Français'], ['en_US', 'English']];

var localeStore = new Ext.data.SimpleStore({
    fields: ['code', 'locale'],
    data: locales
});

var localeCombo = new Ext.form.ComboBox({
	id: 'locale',
	name: 'locale',
    store: localeStore,
    valueField: 'code',
    displayField: 'locale',
    typeAhead: true,
    mode: 'local',
    width: '150px',
    anchor: '80%',
    forceSelection: true,
    triggerAction: 'all',
    selectOnFocus: true,
    hideLabel: true
});

Ext.onReady(function(){
    processBarInstance.updateMsg('Rendering login from......');
    
    Ext.QuickTips.init();
    
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
    
    loginForm = new Ext.FormPanel({
        labelWidth: 75, // label settings here cascade unless overridden
        url: '../servlet/LoginServlet',
        frame: true,
        id: 'loginForm',
        title: loginMessage.getValueFromTagName('ui.login.formtitle'),
        bodyStyle: 'padding:5px 5px 0;',
        width: 320,
        buttonAlign: 'right',
        items: [{
            xtype: 'fieldset',
            collapsible: false,
            autoHeight: true,
            defaults: {
                width: 240
            },
            items: [{
                html: '<div id="rcta"><div class="ctact"><div class="key"></div><div class="txt"><span class="macTitle">' + loginMessage.getValueFromTagName('ui.login.macaddress') + '</span><span id="mac" class="mac"></span></div></div></div>'
            }]
        }, {
            xtype: 'fieldset',
            collapsible: true,
            title: loginMessage.getValueFromTagName('ui.login.pleasewrite'),
            autoHeight: true,
            items: [{
                xtype: 'label',
                style: 'font-size: 13px;',
                text: loginMessage.getValueFromTagName('ui.login.username') + ':'
            }, {
                xtype: 'textfield',
                hideLabel: true,
                name: 'userName',
                id: 'userName',
                style: 'margin:5px 10px 15px 0px;',
                width: '90%',
                allowBlank: false,
                blankText: loginMessage.getValueFromTagName('ui.login.error1')
            }, {
                xtype: 'label',
                style: 'font-size: 13px;',
                text: loginMessage.getValueFromTagName('ui.login.password') + ':'
            }, {
                xtype: 'textfield',
                inputType: 'password',
                hideLabel: true,
                width: '90%',
                name: 'password',
                style: 'margin:5px 10px 15px 0px;',
                allowBlank: false,
                blankText: loginMessage.getValueFromTagName('ui.login.error2')
            }, {
                xtype: 'label',
                style: 'font-size: 13px;',
                width: 180,
                text: loginMessage.getValueFromTagName('ui.login.validatingcode') + ':'
            }, {
                xtype: 'textfield',
                hideLabel: true,
                id: 'validatingCode',
                name: 'validatingCode',
                width: '90%',
                style: 'margin:5px 10px 0px 0px;',
                allowBlank: false,
                blankText: loginMessage.getValueFromTagName('ui.login.error3')
            }, {
                html: getValidatingImg(),
                style: 'vertical-align: middle;margin-bottom: 10px;'
            }, {
                xtype: 'hidden',
                name: 'macAddress',
                id: 'macAddress'
            }, {
                layout: 'column',
                items: [{
                    columnWidth: .5,
                    layout: 'form',
                    items: [localeCombo]
                
                }, {
                    columnWidth: .5,
                    layout: 'form',
                    items: [{
                        xtype: 'button',
                        id:'loginBtn',
                        text: '&nbsp;&nbsp;&nbsp;&nbsp;' + loginMessage.getValueFromTagName('ui.login.login') + '&nbsp;&nbsp;&nbsp;&nbsp;',
                        handler: function(){
                            try {
                                document.getElementById('macAddress').value = MACAddr;
                            } 
                            catch (e) {
                                alert(e);
                            }
                            
                            if (loginForm.getForm().isValid()) {
								document.getElementsByName('locale')[0].value = localeCombo.getValue();
                                loginForm.getForm().submit({
                                    success: function(form, action){
                                        window.location = '../ui/layout.jsp?' + new Date().getTime();
                                    },
                                    failure: function(form, action){
                                        var errorCode = action.result[0].message;
                                        refreshValidatingImg();
                                        //loginForm.getForm().reset();
                                        Ext.getCmp('validatingCode').setValue('');
                                        Ext.MessageBox.alert(message.get('message.tip'), loginMessage.getValueFromTagName(errorCode));
                                    }
                                });
                            }
                        }
                    }]
                
                }]
            }]
        }]
    });
    
    loginForm.render('loginPanelContiner');
    //Set page title
    document.title = loginMessage.getValueFromTagName('ui.login.pagetitle');
    
    processBarInstance.updateMsg('Loading complete......');
    processBarInstance.hide();
    
    sessionTimeOut();
});

